<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件面试题</title>
		<style type="text/css">
			.div1,.div3{
				width: 200px;
				height: 200px;
				background: palegoldenrod;
			}
			.div2,.div4{
				width: 100px;
				height: 100px;
				background: pink;
			}
			.div3{
				margin-top: 20px;				
			}
		</style>
	</head>
	<body>
		<div class="divText">
			区分鼠标的事件
		</div>
		<div class="div1">
			div1....
			<div class="div2">div2....</div>
		</div>
		<div class="div3">
			div3....
			<div class="div4">div4....</div>
		</div>
		
		<!-- 区别mouseover与mouseenter?
		  mouseover:在移入子元素时也会触发,对应mouseout
		  mouseenter:只在移入当前元素时才触发,对应mouseleave
		    hover()使用的就是mouseenter()和mouseleave()
		区别on('eventName',fun)与eventName(fun)
		  on('eventName',fun):通用，但编码麻烦
		  eventName(fun):编码简单，但有的事件没有对应的方法 -->
		
		<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			$('.div1').mouseover(function(){
				console.log('mouseover 进入')
			}).mouseout(function(){
				console.log('mouseout 离开')
			})
			
			$('.div3').mouseenter(function(){
				console.log('mouseenter 进入')
			}).mouseleave(function(){
				console.log('mouseleave 离开')
			})
			
			// $('.div1').click(function(){
			// 	console.log('click 点击')
			// }).click(function(){
			// 	console.log('click 点击2')
			// })
			
			// $('.div3').on('click',function(){
			// 	console.log('on click 点击')
			// }).on('click',function(){
			// 	console.log('on click 点击2')
			// })
		</script>
	</body>
</html>
